<app-left-line
  [text]="'业务办理进度查询'"
></app-left-line>

<div class="order-query card">
  <nz-table #smallTable nzSize="small"
    [nzData]="data"
    [nzLoading]="dataLoading"
    [nzShowPagination]="false"
  >
    <thead>
      <tr>
        <th>序号</th>
        <th *ngFor="let col of cols | dealObj: 'value'">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of smallTable.data; let i = index">
        <td>{{ i + 1 }}</td>
        <td>{{ data['funcNo'] }}</td>
        <td>{{ data['sourceDataTypeName'] }}</td>
        <td>{{ data['sourceTime'] }}</td>
        <td nz-tooltip [nzTooltipTitle]="((data['sourceDataState'] == 4 && data['backReason']) ? data['backReason'] : '')">
          <nz-tag [nzColor]="sourceDataState[data['sourceDataState']].color">{{ sourceDataState[data['sourceDataState']].value }}</nz-tag>
          {{ ((data['sourceDataState'] == 4 && data['backReason']) ? data['backReason'] : '') | substrPipe: 6  }}
        </td>
        <td>
          <button nz-button nzType="link" (click)="orderProgress(data)">进度跟踪</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
<div class="my-pagination">
  <nz-pagination [nzTotal]="total" nzShowSizeChanger 
    [(nzPageSize)]="pageSize"
    [(nzPageIndex)]="pageNumber"
    (nzPageSizeChange)="getOrderList()"
    (nzPageIndexChange)="getOrderList()"
  >

  </nz-pagination>
</div>

<nz-modal [(nzVisible)]="progressModal"
  [nzTitle]="'工单进度'"
  [nzContent]="progress"
  (nzOnOk)="progressOnOk()"
  (nzOnCancel)="progressOnCancel()"
>

</nz-modal>
<ng-template #progress>
  <nz-steps [nzCurrent]="progressData.length - 1" nzDirection="vertical">
    <nz-step 
      [nzTitle]="progress.title" 
      [nzDescription]="progress.date"
      *ngFor="let progress of progressData"
    >
    </nz-step>
  </nz-steps>
</ng-template>
